﻿<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>Grid</title>
		<link rel="shortcut icon" type="image/x-icon" href="Vertical/favicon.ico">
		<!-- google font -->
		<link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700" rel="stylesheet" type="text/css" />
		<link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css">
		<link href="assets/css/font-awesome.min.css" rel="stylesheet" type="text/css">
		<link href="assets/css/ionicons.css" rel="stylesheet" type="text/css">
		<link href="assets/css/simple-line-icons.css" rel="stylesheet" type="text/css">
		<link href="assets/css/jquery.mCustomScrollbar.css" rel="stylesheet">
		<link href="assets/css/style.css" rel="stylesheet">
		<link href="assets/css/responsive.css" rel="stylesheet">
	</head>

	<body>
		<div class="wrapper">
			<!-- header -->
			<header class="main-header">
				<div class="container_header">
					<div class="logo d-flex align-items-center">
						<a href="#"> <strong class="logo_icon"> <img src="assets/images/small-logo.png" alt=""> </strong> <span class="logo-default"> <img src="assets/images/logo2.png" alt=""> </span> </a>
						<div class="icon_menu full_menu">
							<a href="#" class="menu-toggler sidebar-toggler"></a>
						</div>
					</div>
					<div class="right_detail">
						<div class="row d-flex align-items-center min-h pos-md-r">
							<div class="col-xl-5 col-3 search_col ">
								<div class="top_function">

									<div class="search">
										<a id="toggle_res_search" data-toggle="collapse" data-target="#search_form" class="res-only-view collapsed" href="javascript:void(0);"
										aria-expanded="false"> <i class=" icon-magnifier"></i> </a>
										<form id="search_form" role="search" class="search-form collapse" action="#">
											<div class="input-group">
												<input type="text" class="form-control" placeholder="Search...">
												<button type="button" class="btn" data-target="#search_form" data-toggle="collapse" aria-label="Close">
													<i class="ion-android-search"></i>
												</button>
											</div>
										</form>
									</div>
								</div>
							</div>
							<div class="col-xl-7 col-9 d-flex justify-content-end">
								<div class="right_bar_top d-flex align-items-center">

									<!-- notification_Start -->
									<div class="dropdown dropdown-notification">
										<a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-close-others="true" aria-expanded="false"> <i class="fa fa-bell-o"></i> <span class="badge_coun"> 6 </span> </a>
										<ul class="dropdown-menu scroll_auto height_fixed" aria-labelledby="dropdownMenu1">
											<li class="bigger">
												<h3><span class="bold">Notifications</span></h3>
												<span class="notification-label">New 6</span>
											</li>
											<li>
												<ul class="dropdown-menu-list">
													<li>
														<a href="javascript:;"> <span class="time">just now</span> <span class="details"> <span class="notification-icon deepPink-bgcolor"> <i class="fa fa-check"></i> </span> Congratulations!. </span> </a>
													</li>
													<li>
														<a href="javascript:;"> <span class="time">3 mins</span> <span class="details"> <span class="notification-icon purple-bgcolor"> <i class="fa fa-user o"></i> </span> <b>John Micle </b>is now following you. </span> </a>
													</li>
													<li>
														<a href="javascript:;"> <span class="time">7 mins</span> <span class="details"> <span class="notification-icon blue-bgcolor"> <i class="fa fa-comments-o"></i> </span> <b>Sneha Jogi </b>sent you a message. </span> </a>
													</li>
													<li>
														<a href="javascript:;"> <span class="time">12 mins</span> <span class="details"> <span class="notification-icon pink"> <i class="fa fa-heart"></i> </span> <b>Ravi Patel </b>like your photo. </span> </a>
													</li>
													<li>
														<a href="javascript:;"> <span class="time">15 mins</span> <span class="details"> <span class="notification-icon yellow"> <i class="fa fa-warning"></i> </span> Warning! </span> </a>
													</li>
													<li>
														<a href="javascript:;"> <span class="time">10 hrs</span> <span class="details"> <span class="notification-icon red"> <i class="fa fa-times"></i> </span> Application error. </span> </a>
													</li>
												</ul>
											</li>
										</ul>
									</div>
									<!-- notification_End -->
									<!-- DropDown_Inbox -->
									<div class="dropdown dropdown-inbox">
										<a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-close-others="true"> <i class="fa fa-envelope-o"></i> <span class="badge_coun"> 2 </span> </a>
										<ul class="dropdown-menu scroll_auto height_fixed" aria-labelledby="dropdownMenu1">
											<li class="bigger">
												<h3><span class="bold">Messages</span></h3>
												<span class="notification-label">New 2</span>
											</li>
											<li>
												<ul class="dropdown-menu-list">
													<li>
														<a href="#"> <span class="photo"> <img src="assets/images/about-1.jpg" class="img-circle" alt=""> </span> <span class="subject"> <span class="from"> Sarah Smith </span> <span class="time">Just Now </span> </span> <span class="message"> Jatin I found you on LinkedIn... </span> </a>
													</li>
													<li>
														<a href="#"> <span class="photo"> <img src="assets/images/about-1.jpg" class="img-circle" alt=""> </span> <span class="subject"> <span class="from"> Sarah Smith </span> <span class="time">Just Now </span> </span> <span class="message"> Jatin I found you on LinkedIn... </span> </a>
													</li>
													<li>
														<a href="#"> <span class="photo"> <img src="assets/images/about-1.jpg" class="img-circle" alt=""> </span> <span class="subject"> <span class="from"> Sarah Smith </span> <span class="time">Just Now </span> </span> <span class="message"> Jatin I found you on LinkedIn... </span> </a>
													</li>
													<li>
														<a href="#"> <span class="photo"> <img src="assets/images/about-1.jpg" class="img-circle" alt=""> </span> <span class="subject"> <span class="from"> Sarah Smith </span> <span class="time">Just Now </span> </span> <span class="message"> Jatin I found you on LinkedIn... </span> </a>
													</li>
													<li>
														<a href="#"> <span class="photo"> <img src="assets/images/about-1.jpg" class="img-circle" alt=""> </span> <span class="subject"> <span class="from"> Sarah Smith </span> <span class="time">Just Now </span> </span> <span class="message"> Jatin I found you on LinkedIn... </span> </a>
													</li>
													<li>
														<a href="#"> <span class="photo"> <img src="assets/images/about-1.jpg" class="img-circle" alt=""> </span> <span class="subject"> <span class="from"> Sarah Smith </span> <span class="time">Just Now </span> </span> <span class="message"> Jatin I found you on LinkedIn... </span> </a>
													</li>
												</ul>
											</li>
										</ul>
									</div>
									<!--DropDown_Inbox_End -->
									<!-- Dropdown_User -->
									<div class="dropdown dropdown-user">
										<a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-close-others="true" aria-expanded="true"> <img class="img-circle pro_pic" src="assets/images/about-1.jpg" alt=""> </a>
										<ul class="dropdown-menu dropdown-menu-default">
											<li>
												<a href="#"> <i class="icon-user"></i> Profile </a>
											</li>
											<li>
												<a href="#"> <i class="icon-settings"></i> Settings </a>
											</li>
											<li>
												<a href="#"> <i class="icon-directions"></i> Help </a>
											</li>
											<li class="divider"></li>
											<li>
												<a href="lock_screen.html"> <i class="icon-lock"></i> Lock </a>
											</li>
											<li>
												<a href="#"> <i class="icon-logout"></i> Log Out </a>
											</li>
										</ul>
									</div>
									<!-- Dropdown_User_End -->
								</div>
							</div>
						</div>
					</div>
				</div>

			</header>
			<!-- header_End -->
			<!-- Content_right -->
			<div class="container_full">

				<div class="side_bar scroll_auto">
                <div class="user-panel">
						<div class="user_image">
							<img src="assets/images/about-1.jpg" class="img-circle mCS_img_loaded" alt="User Image">
						</div>
						<div class="info">
							<p>
								Alexander Pierce
							</p>
							<a href="#"> <i class="fa fa-circle text-success"></i> Online</a>
						</div>
					</div>

					<ul id="dc_accordion" class="sidebar-menu tree">
						<li class="menu_sub">
							<a href="#"> <i class="fa fa-home"></i> <span>Dashboard</span> 
							<span class="arrow"></span> </a>
							<ul class="down_menu">
								<li>
									<a href="index.html">Dashboard 1</a>
								</li>
								<li>
									<a href="index1.html">Dashboard 2</a>
								</li>
								<li>
									<a href="index2.html">E-Commerce</a>
								</li>
								<li>
									<a href="index3.html">Analysis</a>
								</li>
								
								<li>
									<a href="index-green.html">Dashboard Green</a>
								</li>
								<li>
									<a href="index-orange.html">Dashboard Orange</a>
								</li>
								<li>
									<a href="index-purple.html">Dashboard Purple</a>
								</li>
								<li>
									<a href="index-red.html">Dashboard Red</a>
								</li>
								</ul>
						</li>
						<li class="menu_sub">
							<a href="#"> <i class="fa fa-newspaper-o"></i> <span>UI Elements </span> <span class="arrow"></span> </a>
							<ul class="down_menu">
								<li>
									<a href="alert.html">Alerts</a>
								</li>
								<li>
									<a href="buttons.html">Buttons</a>
								</li>
								<li>
									<a href="cards.html">Cards</a>
								</li>
								<li>
									<a href="dropdown.html">Dropdowns</a>
								</li>
								<li>
									<a href="grid.html">Grids</a>
								</li>
								<li>
									<a href="lists.html">Lists</a>
								</li>
								<li>
									<a href="modal.html">Modals</a>
								</li>
								<li>
									<a href="progress.html"> Progress</a>
								</li>
								<li>
									<a href="popover-tooltips.html">Popover &amp; Tooltips</a>
								</li>
								<li>
									<a href="typography.html">Typography</a>
								</li>
								<li>
									<a href="tabs.html">Tabs</a>
								</li>
								<li>
									<a href="tree.html">Tree</a>
								</li>
								<li>
									<a href="toastr.html">Toastr Notification</a>
								</li>
							</ul>
						</li>
						<li class="menu_sub">
							<a href="#"> <i class="fa fa-pie-chart"></i> <span>Portlets</span> <span class="arrow"></span> </a>
							<ul class="down_menu">
								<li>
									<a href="portlet-base.html">Portlets Base</a>
								</li>
								<li>
									<a href="portlet-advanced.html">Portlets Advanced</a>
								</li>
							</ul>
						</li>
						<li class="menu_sub">
							<a href="#"> <i class="fa fa-laptop"></i> <span>Icons</span> <span class="arrow"></span> </a>
							<ul class="down_menu">
								<li>
									<a href="icon-font-awesome.html">Fontawesome Icons</a>
								</li>
								<li>
									<a href="icon-simple-line.html">Simple line Icons</a>
								</li>
							</ul>
						</li>
						<li class="menu_sub">
							<a href="#"> <i class="fa fa-table"></i> <span>Widgets </span> <span class="arrow"></span> </a>
							<ul class="down_menu">
								<li>
									<a href="widgets-base.html">Widgets Base</a>
								</li>
								<li>
									<a href="widgets-chart.html">Widgets Chart</a>
								</li>
							</ul>
						</li>
						<li class="menu_sub">
							<a href="#"> <i class="fa fa-calendar"></i> <span>Calendar </span> <span class="arrow"></span> </a>
							<ul class="down_menu">
								<li>
									<a href="calendar-basic.html">Basic Calendar</a>
								</li>
								<li>
									<a href="calendar-external-events.html">External Events Calendar</a>
								</li>
								<li>
									<a href="calendar-list.html">List Calendar</a>
								</li>
							</ul>
						</li>
						<li class="menu_sub">
							<a href="#"> <i class="fa fa-wpforms"></i> <span>Forms</span> <span class="arrow"></span> </a>
							<ul class="down_menu">
								<li class="menu_sub">
									<a href="#">Form Control <span class="arrow"></span> </a>
									<ul class="down_menu lavel3">
										<li>
											<a href="form-basic-input.html">Basic Input</a>
										</li>
										<li>
											<a href="form-input-group.html">Input Group</a>
										</li>
										<li>
											<a href="form-checkbox-radio.html">Checkbox & Radio</a>
										</li>
									</ul>
								</li>
								<li class="menu_sub">
									<a href="#">Form Validation <span class="arrow"></span> </a>
									<ul class="down_menu lavel3">
										<li>
											<a href="form-validation-basic.html">Basic Validation</a>
										</li>
										<li>
											<a href="form-validation-jquery.html">jQuery Validation</a>
										</li>
										<li>
											<a href="form-wizard.html">Form Wizard</a>
										</li>
									</ul>
								</li>
							</ul>
						</li>
						<li class="menu_sub">
							<a href="#"> <i class="icon-grid"></i> <span>Data Tables</span> <span class="arrow"></span> </a>
							<ul class="down_menu">
								<li>
									<a href="table-basic.html">Basic Table</a>
								</li>
								<li class="menu_sub">
									<a href="#">Data Tables <span class="arrow"></span> </a>
									<ul class="down_menu">
										<li>
											<a href="table-datatable.html">Basic Datatable</a>
										</li>
										<li>
											<a href="table-datatable-show-hide.html">Toggle Col Datatable</a>
										</li>
										<li>
											<a href="table-datatable-ajax.html">Ajax Datatable</a>
										</li>
									</ul>
								</li>
							</ul>
						</li>
						<li class="menu_sub">
							<a href="#"> <i class="fa fa-bar-chart text-aqua"></i> <span>Charts</span> <span class="arrow"></span> </a>
							<ul class="down_menu">
								<li>
									<a href="flot-chart.html">Flot Charts</a>
								</li>
								<li>
									<a href="echart.html">eCharts</a>
								</li>
								<li>
									<a href="morris-chart.html">Morris Charts</a>
								</li>
							</ul>
						</li>
						<li class="menu_sub">
							<a href="#"> <i class="fa fa-file text-aqua"></i> <span>Extra Pages</span> <span class="arrow"></span> </a>
							<ul class="down_menu">
								<li>
									<a href="profile.html">User Profile</a>
								</li>
								<li>
									<a href="page-login.html">Sign In</a>
								</li>
								<li>
									<a href="page-register.html">Sign Up</a>
								</li>
								<li>
									<a href="invoice.html">Invoice</a>
								</li>
								<li>
									<a href="page_404.html">404</a>
								</li>
							</ul>
						</li>
					</ul>
				</div>

				<!--main contents start-->
				<main class="content_wrapper">
					<!--page title start-->
					<div class="page-heading">
						<div class="container-fluid">
							<div class="row d-flex align-items-center">
								<div class="col-md-6">
									<div class="page-breadcrumb">
										<h1>Grid System</h1>
									</div>
								</div>
								<div class="col-md-6 justify-content-md-end d-md-flex">
									<div class="breadcrumb_nav">
										<ol class="breadcrumb">
											<li>
												<i class="fa fa-home"></i>
												<a class="parent-item" href="index.html">Home</a>
												<i class="fa fa-angle-right"></i>
											</li>
											<li class="active">
												Grid System
											</li>
										</ol>
									</div>
								</div>
							</div>
						</div>
					</div>
					<!--page title end-->
					<div class="container-fluid">
						<div class="row">
							<div class="col-md-12 mb-4">
								<div class="card lobicard-custom-icon">
									<div class="card-header">
										<div class="card-title">
											Stacked to horizontal
											<div class="dropdown">
												<div class="tools">
													<a class="fa fa-repeat btn-color box-refresh" href="javascript:;"></a>
													<a class="t-collapse btn-color fa fa-chevron-down" href="javascript:;"></a>
													<a class="t-close btn-color fa fa-times" href="javascript:;"></a>
												</div>
											</div>
										</div>

									</div>
									<div class="card-body card_chart">
										<p>
											Using a single set of
											<code>
												.col-md-*
											</code> grid classes, you can create a basic grid system that starts out stacked on mobile devices and
											tablet devices (the extra small to small range) before becoming horizontal on desktop (medium) devices. Place grid
											columns within any
											<code>
												.row
											</code>
											.
										</p>
										<div class="row grid-view">
											<div class="col-md-1">
												.col-md-1
											</div>
											<div class="col-md-1">
												.col-md-1
											</div>
											<div class="col-md-1">
												.col-md-1
											</div>
											<div class="col-md-1">
												.col-md-1
											</div>
											<div class="col-md-1">
												.col-md-1
											</div>
											<div class="col-md-1">
												.col-md-1
											</div>
											<div class="col-md-1">
												.col-md-1
											</div>
											<div class="col-md-1">
												.col-md-1
											</div>
											<div class="col-md-1">
												.col-md-1
											</div>
											<div class="col-md-1">
												.col-md-1
											</div>
											<div class="col-md-1">
												.col-md-1
											</div>
											<div class="col-md-1">
												.col-md-1
											</div>
										</div>
										<div class="row grid-view">
											<div class="col-md-8">
												.col-md-8
											</div>
											<div class="col-md-4">
												.col-md-4
											</div>
										</div>
										<div class="row grid-view">
											<div class="col-md-4">
												.col-md-4
											</div>
											<div class="col-md-4">
												.col-md-4
											</div>
											<div class="col-md-4">
												.col-md-4
											</div>
										</div>
										<div class="row grid-view">
											<div class="col-md-6">
												.col-md-6
											</div>
											<div class="col-md-6">
												.col-md-6
											</div>
										</div>
									</div>
								</div>
							</div>
							<div class="col-md-12 mb-4">
								<div class="card lobicard-custom-icon">
									<div class="card-header">
										<div class="card-title">
											Mobile and desktop
											<div class="dropdown">
												<div class="tools">
													<a class="fa fa-repeat btn-color box-refresh" href="javascript:;"></a>
													<a class="t-collapse btn-color fa fa-chevron-down" href="javascript:;"></a>
													<a class="t-close btn-color fa fa-times" href="javascript:;"></a>
												</div>
											</div>
										</div>

									</div>
									<div class="card-body card_chart">
										<p>
											Don’t want your columns to simply stack in smaller devices? Use the extra small and medium device grid classes by adding
											<code>
												.col-xs-*
											</code>
											and
											<code>
												.col-md-*
											</code>
											to your columns. See the example below for a better idea of how it all works.
										</p>
										<div class="row grid-view">
											<div class="col-xs-12 col-md-8">
												.col-xs-12 .col-md-8
											</div>
											<div class="col-xs-6 col-md-4">
												.col-xs-6 .col-md-4
											</div>
										</div>
										<div class="row grid-view">
											<div class="col-xs-6 col-md-4">
												.col-xs-6 .col-md-4
											</div>
											<div class="col-xs-6 col-md-4">
												.col-xs-6 .col-md-4
											</div>
											<div class="col-xs-6 col-md-4">
												.col-xs-6 .col-md-4
											</div>
										</div>
										<div class="row grid-view">
											<div class="col-xs-6">
												.col-xs-6
											</div>
											<div class="col-xs-6">
												.col-xs-6
											</div>
										</div>
									</div>
								</div>
							</div>
							<div class="col-md-12 mb-4">
								<div class="card lobicard-custom-icon">
									<div class="card-header">
										<div class="card-title">
											Mobile, Tablet, Desktop
											<div class="dropdown">
												<div class="tools">
													<a class="fa fa-repeat btn-color box-refresh" href="javascript:;"></a>
													<a class="t-collapse btn-color fa fa-chevron-down" href="javascript:;"></a>
													<a class="t-close btn-color fa fa-times" href="javascript:;"></a>
												</div>
											</div>
										</div>

									</div>
									<div class="card-body card_chart">
										<p>
											Build on the previous example by creating even more dynamic and powerful layouts with tablet
											<code>
												.col-sm-*
											</code>
											classes.
										</p>
										<div class="row grid-view">
											<div class="col-xs-12 col-sm-6 col-md-8">
												<span>.col-xs-12 .col-sm-6 .col-md-8</span>
											</div>
											<div class="col-xs-6 col-sm-4">
												<span>.col-xs-6 .col-sm-4</span>
											</div>
										</div>
										<div class="row grid-view">
											<div class="col-xs-6 col-sm-4">
												<span>.col-xs-6 .col-sm-4</span>
											</div>
											<div class="col-xs-6 col-sm-4">
												<span>.col-xs-6 .col-sm-4</span>
											</div>
											<!-- Optional: clear the XS cols if their content doesn't match in height -->
											<div class="clearfix hidden-sm-up"></div>
											<div class="col-xs-6 col-sm-4">
												<span>.col-xs-6 .col-sm-4</span>
											</div>
										</div>
									</div>
								</div>
							</div>
							<div class="col-md-12 mb-4">
								<div class="card lobicard-custom-icon">
									<div class="card-header">
										<div class="card-title">
											Column Wrapping
											<div class="dropdown">
												<div class="tools">
													<a class="fa fa-repeat btn-color box-refresh" href="javascript:;"></a>
													<a class="t-collapse btn-color fa fa-chevron-down" href="javascript:;"></a>
													<a class="t-close btn-color fa fa-times" href="javascript:;"></a>
												</div>
											</div>
										</div>

									</div>
									<div class="card-body card_chart">
										<p>
											If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.
										</p>
										<div class="row grid-view">
											<div class="col-9">
												.col-9
											</div>
											<div class="col-4">
												.col-4
												<br>
												Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.
											</div>
											<div class="col-6">
												.col-6
												<br>
												Subsequent columns continue along the new line.
											</div>
										</div>
									</div>
								</div>
							</div>
							<div class="col-md-12 mb-4">
								<div class="card lobicard-custom-icon">
									<div class="card-header">
										<div class="card-title">
											Column resets
											<div class="dropdown">
												<div class="tools">
													<a class="fa fa-repeat btn-color box-refresh" href="javascript:;"></a>
													<a class="t-collapse btn-color fa fa-chevron-down" href="javascript:;"></a>
													<a class="t-close btn-color fa fa-times" href="javascript:;"></a>
												</div>
											</div>
										</div>

									</div>
									<div class="card-body card_chart">
										<p>
											With the handful of grid tiers available, you’re bound to run into issues where, at certain breakpoints, your columns don’t
											clear quite right as one is taller than the other. To fix that, use a combination of a
											<code class="highlighter-rouge">
												.clearfix
											</code>
											and our
											<a href="http://mosaddek.com/layout/responsive-utilities/" target="_blank">responsive utility classes</a>.
										</p>
										<div class="row grid-view">
											<div class="col-6 col-sm-3">
												.col-6 .col-sm-3
											</div>
											<div class="col-6 col-sm-3">
												.col-6 .col-sm-3
											</div>
											<!-- Add the extra clearfix for only the required viewport -->
											<div class="clearfix hidden-sm-up"></div>
											<div class="col-6 col-sm-3">
												.col-6 .col-sm-3
											</div>
											<div class="col-6 col-sm-3">
												.col-6 .col-sm-3
											</div>
										</div>
									</div>
								</div>
							</div>
							<div class="col-md-12 mb-4">
								<div class="card lobicard-custom-icon">
									<div class="card-header">
										<div class="card-title">
											Responsive Breakpoints
											<div class="dropdown">
												<div class="tools">
													<a class="fa fa-repeat btn-color box-refresh" href="javascript:;"></a>
													<a class="t-collapse btn-color fa fa-chevron-down" href="javascript:;"></a>
													<a class="t-close btn-color fa fa-times" href="javascript:;"></a>
												</div>
											</div>
										</div>

									</div>
									<div class="card-body card_chart">
										<p>
											In addition to column clearing at responsive breakpoints, you may need to reset offsets, pushes, or pulls.
										</p>
										<div class="row grid-view">
											<div class="col-sm-5 col-md-6">
												<span>.col-sm-5 .col-md-6</span>
											</div>
											<div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">
												<span>.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</span>
											</div>
										</div>
										<div class="row grid-view">
											<div class="col-sm-6 col-md-5 col-lg-6">
												<span>.col.col-sm-6.col-md-5.col-lg-6</span>
											</div>
											<div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">
												<span>.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</span>
											</div>
										</div>
									</div>
								</div>
							</div>
							<div class="col-md-12 mb-4">
								<div class="card lobicard-custom-icon">
									<div class="card-header">
										<div class="card-title">
											Offsetting columns
											<div class="dropdown">
												<div class="tools">
													<a class="fa fa-repeat btn-color box-refresh" href="javascript:;"></a>
													<a class="t-collapse btn-color fa fa-chevron-down" href="javascript:;"></a>
													<a class="t-close btn-color fa fa-times" href="javascript:;"></a>
												</div>
											</div>
										</div>

									</div>
									<div class="card-body card_chart">
										<p>
											Move columns to the right using
											<code class="highlighter-rouge">
												.offset-md-*
											</code>
											classes. These classes increase the left margin of a column by
											<code class="highlighter-rouge">
												*
											</code>
											columns. For example,
											<code class="highlighter-rouge">
												.offset-md-4
											</code>
											moves
											<code class="highlighter-rouge">
												.col-md-4
											</code>
											over four columns.
										</p>
										<div class="row grid-view">
											<div class="col-md-4">
												.col-md-4
											</div>
											<div class="col-md-4 offset-md-4">
												.col-md-4 .offset-md-4
											</div>
										</div>
										<div class="row grid-view">
											<div class="col-md-3 offset-md-3">
												.col-md-3 .offset-md-3
											</div>
											<div class="col-md-3 offset-md-3">
												.col-md-3 .offset-md-3
											</div>
										</div>
										<div class="row grid-view">
											<div class="col-md-6 offset-md-3">
												.col-md-6 .offset-md-3
											</div>
										</div>
									</div>
								</div>
							</div>
							<div class="col-md-12 mb-4">
								<div class="card lobicard-custom-icon">
									<div class="card-header">
										<div class="card-title">
											Push and pull
											<div class="dropdown">
												<div class="tools">
													<a class="fa fa-repeat btn-color box-refresh" href="javascript:;"></a>
													<a class="t-collapse btn-color fa fa-chevron-down" href="javascript:;"></a>
													<a class="t-close btn-color fa fa-times" href="javascript:;"></a>
												</div>
											</div>
										</div>

									</div>
									<div class="card-body card_chart">
										<p>
											Easily change the order of our built-in grid columns with
											<code class="highlighter-rouge">
												.push-md-*
											</code>
											and
											<code class="highlighter-rouge">
												.pull-md-*
											</code>
											modifier classes.
										</p>
										<div class="row grid-view">
											<div class="col-md-9 push-md-3">
												.col-md-9 .push-md-3
											</div>
											<div class="col-md-3 pull-md-9">
												.col-md-3 .pull-md-9
											</div>
										</div>
									</div>
								</div>
							</div>
							<div class="col-md-12 mb-4">
								<div class="card lobicard-custom-icon">
									<div class="card-header">
										<div class="card-title">
											Nesting
											<div class="dropdown">
												<div class="tools">
													<a class="fa fa-repeat btn-color box-refresh" href="javascript:;"></a>
													<a class="t-collapse btn-color fa fa-chevron-down" href="javascript:;"></a>
													<a class="t-close btn-color fa fa-times" href="javascript:;"></a>
												</div>
											</div>
										</div>

									</div>
									<div class="card-body card_chart">
										<p>
											To nest your content with the default grid, add a new
											<code class="highlighter-rouge">
												.row
											</code>
											and set of
											<code class="highlighter-rouge">
												.col-sm-*
											</code>
											columns within an existing
											<code class="highlighter-rouge">
												.col-sm-*
											</code>
											column. Nested rows should include a set of columns that add up to 12 or fewer (it is not required that you use all 12 available
											columns).
										</p>
										<div class="row grid-view">
											<div class="col-sm-9">
												Level 1: .col-sm-9
												<div class="row">
													<div class="col-8 col-sm-6">
														Level 2: .col-8 .col-sm-6
													</div>
													<div class="col-4 col-sm-6">
														Level 2: .col-4 .col-sm-6
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</main>
				<!--main contents end-->

			</div>
			<!-- Content_right_End -->
			<!-- Footer -->
			<footer class="footer ptb-20">
				<div class="row">
					<div class="col-md-12 text-center">
						<div class="copy_right">
							<p>
								2018 © Dashboard Theme By
								<a href="http://www.17sucai.com/">Jeparo</a>
							</p>
						</div>
						<a id="back-to-top" href="#"> <i class="ion-android-arrow-up"></i> </a>
					</div>
				</div>
			</footer>
			<!-- Footer_End -->
		</div>
		<script type="text/javascript" src="assets/js/jquery.min.js"></script>
		<script type="text/javascript" src="assets/js/popper.min.js"></script>
		<script type="text/javascript" src="assets/js/bootstrap.min.js"></script>
		<script type="text/javascript" src="assets/js/jquery.mCustomScrollbar.concat.min.js"></script>
		<script type="text/javascript" src="assets/js/jquery.dcjqaccordion.2.7.js"></script>
		<script src="assets/js/custom.js" type="text/javascript"></script>
	</body>

</html>
